<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--添加门店-->
      <div class="common-form">修改富文本</div>
      <el-form-item label="名称" prop="title" :rules="[{required: true,message: '请输入名称'}]">
        <el-input v-model="form.title" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="代码" prop="code" :rules="[{required: true,message: '请输入代码'}]">
        <el-input v-model="form.code" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content" :rules="[{required: false,message: '请输入内容'}]">
        <Editor v-model="form.content" @change="contentChange"/>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" type="number" class="max-w460"></el-input>
        <div class="tips">数字越小越靠前</div>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper"><el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
    </el-form>
  </div>
</template>

<script>
import Editor from '@/components/editor/index.vue';
import SettingApi from '@/api/setting.js';
export default {
  components: {
    /*编辑器*/
    Editor
  },
  data() {
    return {
      /*表单数据*/
      form: {
        title: '',
        code: '',
        content:'',
        sort: 1,
      },
      loading: false
    };
  },
  created() {
    this.getData();
  },

  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      // 取到路由带过来的参数
      const params = this.$route.query.richtext_id;
      SettingApi.richtextDetail(
        {
          richtext_id: params
        },
        true
      )
        .then(data => {
          let detail = data.data.detail;
          self.form = detail;
          // 将数据放在当前组件的数据内
          // self.form.richtext_id = detail.richtext_id;
          // self.form.title = detail.title;
          // self.form.code = detail.code;
          // self.form.content = detail.content;
          // self.form.sort = detail.sort;
        })
        .catch(error => {});
    },

    /*提交表单*/
    onSubmit() {
      let self = this;
      self.loading = true;
      let params = this.form;
      SettingApi.editRichtext(params, true)
        .then(data => {
          self.loading = false;
          self.$message({
            message: '修改成功',
            type: 'success'
          });
          self.$router.push('/setting/richtext/index');
        })
        .catch(error => {
          self.loading = false;
        });
    },
    contentChange(e){
      this.form.content = e;
      console.log(e);
    }
  }
};
</script>

<style>
.tips {
  color: #ccc;
}
</style>
